<template>
    <!-- 封装的input输入框 -->
    <view class="fInput flexaic">
        <!-- 输入框前边的图标 -->
        <view class="iconfont beforeicon" :class="beforeicon" v-if="beforeicon"></view>
        <!-- 输入框 -->
        <input @input="change" @confirm='change' class="inputInnner" :maxlength="maxlength" v-model="newvalue"
            :disabled='disabled' :password="password" :type="type" :placeholder="placeholder" />
        <!-- 清空内容图标 -->
        <view @tap.stop="clear" v-if="isclear && newvalue.length > 0" class="iconfont icon-qingkong"></view>
        <!-- 验证码按钮  -->
        <view class="verifbtn flexcent">
            <view @click="sendcode" v-if="codetime === 0">
                发送验证码
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'fInput', //封装的input输入框
    props: {
        // 输入框初始内容
        value: {
            type: [String, Number],
        },
        // input 的类型,默认text
        type: {
            type: [String],
            default: 'text'
        },
        // 是否是密码类型	
        password: {
            type: [Boolean],
            default: false
        },
        // 是否禁用
        disabled: {
            type: [Boolean],
            default: false
        },
        // 最大输入长度
        maxlength: {
            type: [Number],
            default: -1
        },
        // 输入框默认输入内容
        placeholder: {
            type: [String],
            default: '请输入'
        },
        // 是否显示清空按钮,默认显示
        isclear: {
            type: [Boolean],
            default: true
        },
        // 输入框左边的内容
        beforeicon: {
            type: [String],
            default: ''
        },
    },
    data() {
        return {
            newvalue: "", //输入框内容
            timeout: null, //定时器
            codetime: 0, //验证码倒计时时间
        }
    },
    watch: {
        // 初始化同步数据 
        value: {
            handler(newName, oldName) {
                this.newvalue = newName || '';
            },
            deep: true,
            immediate: true
        }
    },
    destroyed() {
        // 清除页面定时器内容
        clearInterval(this.timeout)
    },
    methods: {
        // 发送验证码的事件，收到后准备定时器
        sendcode() {
            // 传出发送验证码的方法
            this.$emit("sendcode", this.settime)
        },
        // 启动定时器的函数
        settime() {
            this.isverif = 2
            // 启动定时器
            this.codetime = 60
            this.timeout = setInterval(() => {
                this.codetime--
                if (this.codetime === 0) {
                    this.isverif = 1
                    clearInterval(this.timeout)
                }
            }, 1000)
        },
        // 数据变化时触发
        change() {
            this.$emit('update:value', this.newvalue)
            // 停止输入后触发(.5s后停止)。
            this.way.debounce(500).then(() => {
                this.$emit("change", this.newvalue)
            });
        },
        // 清空输入框
        clear() {
            this.$emit('clear')
            this.newvalue = ''
            this.change()
        }
    }
}
</script>

<style lang="less" scoped>
// 封装的input输入框
.fInput {
    width: 100%;

    // 输入框前边的图标
    .beforeicon {
        margin: 0 20rpx;
        font-size: 30rpx;
    }

    // 输入框
    .inputInnner {
        flex: 1;
        height: 100%;
        font-size: 28rpx;
    }

    // 清空内容图标
    .icon-qingkong {
        opacity: 0.8;
        font-size: 40rpx;
        margin: 0 10rpx;
        color: #c3c3c3;
    }

    // 验证码按钮
    .verifbtn {
        height: 30rpx;
        padding: 0rpx 15rpx;
        border-left: 1rpx solid #2e60e9;
        font-size: 28rpx;
        color: #2E60E9;

        view {
            width: 140rpx;
            text-align-last: justify;
        }
    }
}
</style>